<template>
	<view>
		<view style="height: 300rpx;" class="main-bg-color text-white p-4 flex align-end justify-between">
			<view class="mb-3">
				<view class="font-lg text-white">
					{{orderStatusEnum[orderInfo.status]}}
				</view>
				<view class="font text-white mt-1">
					{{orderDescEnum[orderInfo.status]}}
				</view>
			</view>
			<view class="mb-3 iconfont icon-xiaohuoche text-white" style="font-size: 100rpx;"></view>
		</view>
		<view class="p-3 bg-white">
			<view class="text-light-muted font-md mr-3 mb-1">
				<text class="font-lg text-dark">{{deliveryAddress.receiverName}}</text>
				{{deliveryAddress.receiverMobile}}
			</view>
			<view class="text-light-muted font-md">
				{{deliveryAddress.provinceName}} {{deliveryAddress.cityName}} {{deliveryAddress.districtName}} {{deliveryAddress.detailAddress}}
			</view>
		</view>
		<divider></divider>
		<view>
			<uni-list>
				<uni-list-item v-for="orderItem in orderInfo.orderItems" :border="false" :title="orderItem.productName" :note="'x'+orderItem.num"
									:thumb="orderItem.productImg"
									thumb-size="lg">
					<template v-slot:footer>
						<view class="flex justify-end align-center">
							<price :priceSize="'font-lg'">{{orderItem.price}}</price>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="商品总价" :rightText="'¥'+(orderInfo.totalPrice || 0)" />
				<uni-list-item :border="false" title="运费" :rightText="'¥'+(orderInfo.deliveryFee || 0)" />
				<uni-list-item :border="false" title="实付款" v-if="orderInfo.status > 1">
					<template v-slot:footer>
						<view class="flex justify-end align-center" >
							<price :priceSize="'font-md'">{{orderInfo.realPay}}</price>
						</view>
					</template>
				</uni-list-item>
				<divider></divider>
				
				<uni-list-item :border="false" title="订单编号">
					<template v-slot:footer>
						<view class="flex justify-end align-center text-light-muted" >
							{{orderInfo.orderCode}}
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="支付交易号" v-if="orderInfo.status > 1">
					<template v-slot:footer>
						<view class="flex justify-end align-center text-light-muted" >
							{{orderInfo.tradeCode}}
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="创建时间">
					<template v-slot:footer>
						<view class="flex justify-end align-center text-light-muted" >
							{{formatTime(orderInfo.createdTime)}}
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="付款时间" v-if="orderInfo.status > 1">
					<template v-slot:footer>
						<view class="flex justify-end align-center text-light-muted" >
							{{formatTime(orderInfo.payTime)}}
						</view>
					</template>
				</uni-list-item>
				<uni-list-item :border="false" title="发货时间" v-if="orderInfo.status >= 3">
					<template v-slot:footer>
						<view class="flex justify-end align-center text-light-muted" >
							{{formatTime(orderInfo.deliveryTime)}}
						</view>
					</template>
				</uni-list-item>
			
				<view style="height: 120rpx;"></view>
				<view style="height: 120rpx;z-index: 100;" class="border-top position-fixed flex align-center justify-end bottom-0 left-0 right-0 bg-white p-2 font-md">
					<view v-if="orderInfo.status >= 3" style="border-radius: 40rpx;" class="main-button" hover-class="main-bg-hover-color">查看物流</view>
					<view v-if="orderInfo.status == 3" style="border-radius: 40rpx;" class="main-button" hover-class="main-bg-hover-color">确认收货</view>
					<view @click="goPay(orderInfo.orderCode)" v-if="orderInfo.status == 0" class="main-button" hover-class="main-bg-hover-color">去支付</view>
					<view v-if="orderInfo.status >= 4" style="border-radius: 40rpx;" class="main-button" hover-class="main-bg-hover-color">申请售后</view>
				</view>

			</uni-list>
		</view>
		
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { queryByOrderCode } from "@/api/order/order.js"
	import divider from "@/components/divider.vue"
	import price from "@/components/price.vue"
	import { orderStatusEnum, orderDescEnum } from "@/utils/common/const.js"
	import { formatTime } from "@/utils/common/date-util.js"
	
	const orderInfo = ref({})
	const orderCode = ref("")
	const deliveryAddress = ref({})
	
	onLoad((e)=>{
		if(e.data){
			orderCode.value = e.data
		}
		queryByOrderInfo()
	})
	
	
	const queryByOrderInfo = async()=>{
		let res = await queryByOrderCode({orderCode:orderCode.value})
		if(res.data){
			orderInfo.value = res.data
		}
		console.log("订单信息",orderInfo.value);
		if(orderInfo.value.deliveryAddress){
			deliveryAddress.value = JSON.parse(orderInfo.value.deliveryAddress)
			console.log("deliveryAddress.value",deliveryAddress.value);
		}
	}
	
	const goPay = (orderCode) => {
		// 去支付
		uni.navigateTo({
			url:"/pages/pay/pay?data="+orderCode
		})
	}
</script>

<style>

</style>
